<template>


    <div id="chartLine" class="line-wrap">

    </div>

</template>

<script>
import * as echarts from "echarts";

export default {
  name:'DynamicLineChart',
  data() {
    return {
      chartLine: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.drawLineChart();
    })
  },
  methods: {
    drawLineChart(){
      this.chartLine = echarts.init(this.$el,'shine');
      let option = {
        tooltip:{
          trigger:'axis',
        },
        legend:{
          data:['NET I/O','BLOCK I/O','CPU 的使用情况','MEM']
        },
        calculable:true,
        xAxis:[
          {
            type:'category',
            boundaryGap:false,
            axisTick:{
              show:false
            },
            data:['19:00','19:01','19:02','19:03','19:04','19:05']
          }
        ],
        yAxis:[
          {
            type: 'value',
            axisTick: {
              show:false
            },
            name:'（资源使用率）'
          }
        ],
        series:[
          {
            name:'NET I/O',
            type:'line',
            stack:'使用率',
            data:[10,15,18,20,22,30],
          },
          {
            name:'BLOCK I/O',
            type: 'line',
            stack: '使用率',
            data:[28,30,23,42,17,51],
          },
          {
            name: 'CPU 的使用情况',
            type: 'line',
            stack: '使用率',
            data:[63,22,89,38,68,73],
          },
          {
            name:'MEM',
            type: 'line',
            stack: '使用率',
            data:[67,70,84,70,51,36],
          }
        ]
      };
      this.chartLine.setOption(option);
    }
  }
}
</script>
<style type="text/css">
.line-wrap{
  width: 50%;
  height: 50%;
  position: absolute;
  top: 50%;
  left: 80%;
  transform: translate(-100%,-50%);
}
</style>
